<template>
  <div>
    <van-nav-bar title="我的关注" left-arrow @click-left="onClickLeft" />
    <van-search
      v-model="searchWord"
      show-action
      shape="round"
      placeholder="搜索已关注的人"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          @click="showHomepage(item.pid)"
        >
          <div id="list">
            <div>
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="item.headUrl"
                id="head"
              />
            </div>
            <div id="info">
              <van-row>{{ item.name }}</van-row>
              <van-row>{{ item.pid }}</van-row>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  setup() {},
  data() {
    return {
      searchWord: "",
      showCancel: "false",
      list: [],

      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    //获取关注信息
    var friend = JSON.parse(localStorage.getItem("friend"));
    //获取取消关注信息
    var nofocus = JSON.parse(localStorage.getItem("nofucus"));
    if (nofocus == null) {
      this.list = friend;
      console.log(this.list);
    } else {
      for (var i in friend) {
        var flag = 0;
        for (var j in nofocus) {
          if (friend[i].pid == nofocus[j].pid) {
            flag = 1;
            break;
          }
        }
        if (!flag) {
          this.list.push(friend[i]);
        }
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showHomepage(pid) {
      this.$router.push("/homepage/" + pid);
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        // for (let i = 0; i < 2; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },

    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad;
    },
    //搜索功能
    onSearch() {
      var item = [];
      console.log(this.list);
      for (var i in this.list) {
        if (this.list[i].name.indexOf(this.searchWord) != -1) {
          item.push(this.list[i]);
        }
      }
      this.list = item;
    },
  },
};
</script>

<style scoped>
#list {
  height: 60px;
  display: flex;
}
#head {
  padding-top: 10px;
}
#info {
  width: 300px;
  padding-top: 10px;
  margin-left: 10px;
}
</style>